<template>
    <el-menu class="nav-menu scroll-bar" :collapse="true" background-color="#001A2E" text-color="#fff" active-text-color="#ffffff" router :default-active="$route.path">
        <div class="logo-box" @click="goHome">
            <i class="iconfont icon-liulanqitubiao"></i>
        </div>
        <sidebar-item v-show="showOps !== '1'" v-for="(menu, i) in menuList" :key="`a-${i}`" :item="menu" />
        <sidebar-item v-show="showOps === '1'" v-for="(menu, i) in opsList" :key="`b-${i}`" :item="menu" />
    </el-menu>
</template>

<script>
import SidebarItem from './SidebarItem'
import { mapGetters } from 'vuex'
export default {
    name: 'NavMenu',
    components: { SidebarItem },
    computed: {
        ...mapGetters({
            showOps: 'common/getShowOps'
        })
    },
    data () {
        return {
            opsList: [
                { name: '运维中心', icon: 'icon-yunweiguanli1', path: '/opsCenter' },
                { name: '任务管理', icon: 'icon-renwuguanli1', path: '/taskManage' },
                { name: '任务血缘', icon: 'icon-renwuxieyuan', path: '/taskBlood' },
                { name: '任务日志', icon: 'icon-rizhiguanli', path: '/taskLogs' }
            ],
            menuList: [{
                    name: '实验编辑',
                    icon: 'icon-shiyanbianjiqi',
                    path: '/expEdit'
                },
                {
                    name: '实验模板',
                    icon: 'icon-shiyanmoban',
                    path: '/expTemplate'
                },
                {
                    name: '实验管理',
                    icon: 'icon-shiyanguanli',
                    path: '/expList'
                },
                {
                    name: '数据管理',
                    icon: 'icon-shujuguanli1',
                    path: '/dataList'
                },
                {
                    name: '模型管理',
                    icon: 'icon-moxingguanli',
                    path: '/modelList'
                }
            ]
        }
    },
    methods: {
        goHome () {
            window.location.href = `${location.origin}/index.html#/projects`
        }
    }
}
</script>

<style lang="less">
.nav-menu {
    overflow-x: hidden;
    width: 100%;
    height: 100%;

    .logo-box {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i {
            color: #ffffff;
            font-size: 30px;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
        }
    }
}
</style>
